<template>
  <div class="menue-container">
    <router-link
      :exact="item.exact"
      v-for="item in items"
      :key="item.link"
      :to="{ name: item.name }"
      active-class="selected"
      
      exact-active-class=""
    >
      <div class="icon">
        <IndexIcon :type="item.icon" />
      </div>
      <span>{{ item.title }}</span>
    </router-link>
  </div>
</template>

<script>
import IndexIcon from "../Icon/IndexIcon";
export default {
  components: {
    IndexIcon,
  },
  data() {
    return {
      items: [
        {
          name: "HomeView",
          title: "首页",
          icon: "home",
          exact: true,
        },
        {
          name: "BlogView",
          title: "文章",
          icon: "blog",
          exact: false,
        },
        {
          name: "AboutView",
          title: "关于我",
          icon: "about",
          exact: true,
        },
        {
          name: "ProjectView",
          title: "项目&效果",
          icon: "code",
          exact: true,
        },
        {
          name: "MessageView",
          title: "留言板",
          icon: "chat",
          exact: true,
        },
      ],
    };
  },
};
</script>

<style scoped lang="less">
@import "~@/style/var.less";
.menue-container {
  color: @gray;
  margin: 24px 0;

  a {
    &.router-link-active {
      background: darken(@words, 3%);
      display: flex;
    }
    padding: 0 50px;
    display: block;
    display: flex;
    align-items: center;
    height: 45px;
    .icon {
      width: 24px;
    }
    &:hover {
      color: #fff;
    }
  }
}
</style>